<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<view slot="content" class="center">
				农事社区
			</view>
			<view slot="right">
				<button class="cu-btn round bg-green" @tap="searchUser">用户查找</button>
			</view>
		</cu-custom>

		<view class="add" @tap="publish">
			+
		</view>

		<view class="show-img" v-show="imgShow" @tap="cancleImgShow($event)">
			<image :src="imgShow" mode="widthFix" style="width: 100%; "></image>
		</view>

		<view v-if="cardList.length !== 0">

			<view class="cu-card dynamic" :class="isCard?'no-card':''">
				<view class="cu-item shadow" v-for="(item, index) in cardList" :key="index">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="{backgroundImage: 'url('+ item.avatar +')'}"></view>
							<view class="content flex-sub">
								<view>{{item.username}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{item.publishDate}}
								</view>
							</view>
						</view>
					</view>
					<view class="text-content margin-top-sm">
						<text class="text-lg">{{item.content}}</text>
					</view>
					<view class="grid flex-sub padding-lr padding-bottom" :class="isCard?'col-3 grid-square':'col-1'">
						<view class="bg-img" :class="isCard?'':'only-img'" v-for="(item1,index) in item.picturesUrl" :key="index" :style="{backgroundImage: 'url('+ item1 +')'}"
						 @tap="cliclImage(item.picturesUrl, index)"></view>
						<!-- <view class="bg-img" :class="isCard?'':'only-img'" v-for="(item1,index) in item.picturesUrl" :key="index" :style="{backgroundImage: 'url('+ item1 +')'}"  @tap="imgShowClick(item1)"></view> -->
						<!-- <image class="bg-img" :src="item1" :class="isCard?'':'only-img'" mode="aspectFill" v-for="(item1,index) in item.picturesUrl" :key="item1" @click="cliclImage(item1, index)"></image> -->
					</view>
					<view class="line"></view>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>
<script>
	import cuCustom from "../../plugin/colorui/components/cu-custom.vue";
	export default {
		data() {
			return {
				isCard: true,
				cardList: [], //保存社区分享帖的数组,
				img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
				page: 1, //当前浏览页数
				act: 0, //0为下拉刷新，1为上拉加载
				info: '内容加载中...',
				imgShow: '',
				headImgMap: new Map()
			}
		},
		created() {

		},
		onLoad() {
			this.getNewPublish(); //每次进页面会自动刷新
			var this_ = this;
			//添加监听刷新事件
			uni.$on('reloadNssq', function(data) {
				this_.getNewPublish();
			})
		},
		components: {
			cuCustom
		},
		onPullDownRefresh() { //下拉刷新
			this.getNewPublish();
		},
		onReachBottom() { //看到底部，上拉加载更多
			this.getMorePublish();
		},
		methods: {
			searchUser() {
				uni.navigateTo({
					url: "/pages/nssq/search"
				}); //跳转到查找用户页面
			},
			publish() {
				uni.navigateTo({
					url: "/pages/nssq/publish"
				}); //跳转到发布动态页面
			},
			dealimg(res, data) { //处理改正图片url
				var data = res.data.data;
				this.page++;
				uni.stopPullDownRefresh(); //获取成功清除刷新的样式
				for (let i = 0; i < data.length; i++) {
					if (data[i].picturesUrl !== null) {
						data[i].picturesUrl = (data[i].picturesUrl == null || data[i].picturesUrl == "") ? '' : data[i].picturesUrl.split(
							','); //防止没图片也显示图片框
						var p = data[i].picturesUrl;
						for (let i = 0; i < p.length; i++) {
							if (p[i] != '' && p[i] != null) {
								p[i] = this.$config.imgUrl + '/' + p[i]; //图片路径组合
							}
						}
					}
				}
				for (let i = data.length - 1; i >= 0; i--) { //后端返回的数据，用户第一次出现（从后往前）才带头像地址，此处使用map，遇到头像把userid和头像地址存起来，然后对每条动态进行判定
					if (data[i].avatar != null) { //处理头像路径
						data[i].avatar = this.$config.imgUrl + '/' + data[i].avatar;
						this.headImgMap.set(data[i].userId, data[i].avatar);
					} else if (this.headImgMap.get(data[i].userId)) {
						data[i].avatar = this.headImgMap.get(data[i].userId);
					} else {
						data[i].avatar = '/static/avatar_boy.png';
					}
				}
			},
			getInfo(act) { //上拉加载和下拉刷新公共代码提取
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: this.$config.apiUrl + '/dasPostController/listPost',
					data: {
						userId: this.$store.getters.userid,
						page: this.page,
						size: 5
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.ok) {
							var data = res.data.data;
							this.dealimg(res, data);
							if (act == 0) {
								this.cardList = data; //此处为下拉刷新整个动态，所以重新赋值
								this.info = '内容空空如也';
							} else {
								this.cardList.push(...data); //此处为看到底部上拉刷新，把新动态添加进原来动态列表内
							}
						} else {
							uni.showModal({
								title: '提示',
								content: "获取失败",
								showCancel: false
							});
						}
					},
					fail: () => {
						uni.showModal({
							title: '提示',
							content: "获取信息失败",
							showCancel: false
						});
					}
				});
			},
			getNewPublish() { //下拉刷新页面
				this.page = 1;
				this.act = 0;
				this.getInfo(this.act);
			},
			getMorePublish() { //上拉加载更多
				this.act = 1;
				this.getInfo(this.act);
			},
			imgShowClick(url) {
				this.imgShow = url;
			},
			cancleImgShow(e) {
				this.imgShow = '';
			},
			/**
			 *  查看图片大图
			 * @param {Object} images
			 * @param {Object} index
			 */
			cliclImage(images, index) {
				uni.previewImage({
					urls: images,
					current: index,
					longPressActions: {
						itemColor: '#12B368',
						success: function(data) {},
						fail: function(err) {}
					}
				});
			}
		}
	}
</script>
<style scoped>
	.center {
		font-size: 32rpx;
		font-weight: bolder;
	}

	.line {
		border: 10rpx solid rgb(241, 241, 241);
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		background-color: #1cbbb4;
		border-radius: 50%;
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		z-index: 9999;
		color: white;
		font-size: 70rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.show-img {
		z-index: 9999999;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		background-size: contain;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
	}
</style>
